<template>
  <u-container-layout>
    <zlrt-table :p="orderCtx">
      <template #before>
        <zlrt-search :p="orderCtx">
          <template #projectName>
            <el-input v-model="orderCtx.otherFilter.projectName" placeholder="请输入项目名称" />
          </template>
          <template #blueprintName>
            <el-input v-model="orderCtx.otherFilter.blueprintName" placeholder="请输入图纸名称" />
          </template>
        </zlrt-search>
        <div class="tool-bar">
          <el-button type="danger" v-hasPermit="['wms-order:requirement:del']" icon="Delete"
            :disabled="!orderCtx.selected.length" @click="orderCtx.batchDelete()">
            批量删除
          </el-button>
          <span style="float:right;">
            <el-upload style="display: inline-block;position: relative;top: 4px;margin-right: 10px;"
              v-model:file-list="importCtx.importFiles" action="#"
              :http-request="options => importCtx.other.importMultiple(options)" :show-file-list="false" :limit="1">
              <el-button type="warning" :loading="importCtx.importLoading" icon="Upload"
                v-hasPermit="['wms-order:requirement:save']">
                导入
              </el-button>
            </el-upload>
            <el-button type="success" v-hasPermit="['wms-order:requirement:list']" :loading="orderCtx.exportLoading"
              icon="Download" @click="orderCtx.export()">
              导出
            </el-button>
            <!-- <el-button type="primary" v-hasPermit="['wms-order:requirement:save']" icon="Plus" @click="orderCtx.showEdit()">
              添加
            </el-button> -->
          </span>
        </div>
      </template>
      <template #status="scope">
        {{ orderCtx.other.getStatus(scope.row.status) }}
      </template>
      <template #operation="scope">
        <el-button type="primary" v-hasPermit="['wms-order:requirement:save']" link size="small" icon="Edit"
          @click="orderCtx.other.showEdit(scope.row)">
          编辑
        </el-button>
        <el-button v-hasPermit="['wms-order:requirement:del']" type="danger" link size="small" icon="Delete"
          @click="orderCtx.del(scope.row.id)">
          删除
        </el-button>
      </template>
      <template #after>
        <el-dialog v-model="orderCtx.editVisible" :title="orderCtx.editAction + orderCtx.title" width="800px"
          append-to-body :close-on-click-modal="false" @close="orderCtx.closeEdit()">
          <el-form :ref="(e) => orderCtx.formRef = e" :model="orderCtx.editData" :rules="orderCtx.rules"
            v-loading="orderCtx.editLoading" label-width="120px" class="demo-ruleForm">
            <!-- <el-form-item label="项目" prop="projectName">
              <el-select v-model="orderCtx.editData.projectName" filterable allow-create placeholder="请选择项目"
                @change="orderCtx.other.handelProjectChange">
                <el-option v-for="item in projectOptions" :key="item.id" :label="item.name" :value="item.name">
                </el-option>
              </el-select>
            </el-form-item> -->
            <zlrt-table :p="orderGoodsCtx">
              <template #skuName="scope">
                <el-select
                  style="width: 270px;"
                  v-model="scope.row.skuName"
                  filterable
                  remote
                  reserve-keyword
                  :remote-method="getGoodsList"
                  :loading="loading"
                  @change="orderCtx.other.handleSkuChange($event, scope)"
                >
                  <el-option
                    v-for="item in goodsOptions"
                    :key="item.id"
                    :label="item.skuName"
                    :value="item.barCode"
                  />
                </el-select>
              </template>
              <template #number="scope">
                <el-input style="width: 100%;" v-model="scope.row.number" />
              </template>
              <template #number1="scope">
                <el-input style="width: 100%;" v-model="scope.row.number1" />
              </template>
            </zlrt-table>
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="orderCtx.editVisible = false">取消</el-button>
              <el-button type="primary" @click="orderCtx.save()">确定</el-button>
            </span>
          </template>
        </el-dialog>
      </template>
    </zlrt-table>

    <!--导入-->
    <el-dialog v-model="importCtx.editVisible" :title="importCtx.title" width="90%" append-to-body
      :close-on-click-modal="false" top="3vh">
      <el-form :model="importCtx.editData" :rules="importCtx.rules" :ref="(e) => importCtx.formRef=e"
        label-width=" 120px">
        <el-row id="import-top">
          <el-col :span="6">
            <el-form-item label="项目" prop="projectName">
              <el-select v-model="importCtx.editData.projectName" filterable allow-create placeholder="请选择项目"
                @change="importCtx.other.handelProjectChange">
                <el-option v-for="item in projectOptions" :key="item.id" :label="item.name" :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="18">
            <el-form-item label="柜号" prop="code">
              <el-input v-model="importCtx.editData.blueprintName" placeholder="逗号分隔，如 G1,G2,G3" />
            </el-form-item>
          </el-col> -->
          <el-col :span="18">
            <el-form-item label="图纸名称" prop="blueprintName">
              <el-input v-model.trim="importCtx.editData.blueprintName" placeholder="按逗号，分号，除号分隔，如：(G1,G2)(G1;G2)(G1/G2)" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-divider content-position="center">物料明细</el-divider>
      <zlrt-table :p="importCtx">
        <template #expand="scope1">
          <div class="sku-search">
            <el-row>
              <el-col :span="8">
                <el-input v-model="scope1.row.searchSkuName" @blur="importCtx.other.searchSku(scope1.row)"
                  @keyup.enter="importCtx.other.searchSku(scope1.row)" />
              </el-col>
              <el-col :span="16">
                <el-input v-model="scope1.row.searchSpecification" @blur="importCtx.other.searchSku(scope1.row)"
                  @keyup.enter="importCtx.other.searchSku(scope1.row)" />
              </el-col>
            </el-row>
          </div>
          <el-table :data="scope1.row.goodsList" style="width:95%;float:right" header-cell-class-name="childheader">
            <!-- <el-table-column type="selection" width="55" /> -->
            <el-table-column prop="skuName" label="物料名称"></el-table-column>
            <el-table-column prop="barCode" label="物料编码"></el-table-column>
            <el-table-column prop="specification" label="规格型号">
              <template #default="scope">
                {{ scope.row.specification || '-'}}
              </template>
            </el-table-column>
            <el-table-column prop="unit" label="单位">
              <template #default="scope">
                {{ scope.row.unit || '-'}}
              </template>
            </el-table-column>

            <el-table-column prop="number" label="库存数量">
              <template #default="prop">
                {{ prop.row.number || 0 }}
              </template>
            </el-table-column>
            <el-table-column prop="needNumber" label="需求数量">
              <template #default="prop">
                <el-input type="number" v-model.trim="prop.row.needNumber" style="width: 100px;"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="requestNumber" label="请购数量">
              <template #default="prop">
                <el-input type="number" v-model.trim="prop.row.requestNumber" style="width: 100px;"></el-input>
              </template>
            </el-table-column>
          </el-table>
        </template>

      </zlrt-table>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="importCtx.editVisible = false">取消</el-button>
          <el-button type="primary" :disabled="!importCtx.data?.length" @click="importCtx.other.submit()">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </u-container-layout>
</template>

<script lang="ts" src="./requirement" />

<style >
.tableRowClassName {
  /* border: solid red 1px;
  background-color: red; */
  color: blue;
  font-weight: bold;
}

.childheader {
  padding: 0 !important;
  background-color: #ffd !important;
  height: 25px !important;
}

.sku-search .el-input {
  padding: 0 10px;
}

.sku-search input {
  color: #060;
}
</style>
